import React, { FC } from 'react'
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts'
import { QuestionRadioStatType } from '../QuestionRadio'

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']

const StatPieChart: FC<QuestionRadioStatType> = props => {
  const { stat } = props

  // 计算单个百分比
  function getPercent(itemCoiunt: number) {
    return (itemCoiunt / stat.reduce((acc, cur) => acc + cur.count, 0)) * 100
  }

  return (
    <ResponsiveContainer width="100%" height="100%">
      <PieChart>
        <Pie
          data={stat}
          cx="50%" // 圆心x坐标
          cy="50%" // 圆心y坐标
          labelLine={true} // 是否显示标签线
          outerRadius={80} // 外半径
          fill="#8884d8" // 填充颜色
          dataKey="count" // 数据键
          label={entry => `${entry['aria-label']} (${getPercent(entry.count).toFixed(2)}%})`} // 显示的文字
        >
          {stat.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} aria-label={entry.value}>
              <Tooltip />
            </Cell>
          ))}
        </Pie>
      </PieChart>
    </ResponsiveContainer>
  )
}

export default StatPieChart
